<template>
  <div>
    <input type="text" class="searchInput" placeholder="搜索内容" ref="content"/>
    <el-button icon="el-icon-search" circle  @click="search()" style = "margin-left:10px;"></el-button>
    <span class="show">当前用户:{{showUser}}</span>
    <el-button type="info" @click="clearAllCookie()" class="exit">退出</el-button>

    <el-dialog title="搜索结果" :visible.sync="dialogTableVisible">
      <el-table :data="tableData">   <!--编号id  描述details  种类cat_sort  价格price  地址memo   操作   see-->
        <el-table-column prop="id" label="编号" width="50px;"></el-table-column>
        <el-table-column prop="details" label="描述" width="180px;"></el-table-column>
        <el-table-column prop="cat_sort" label="种类"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="memo" label="地址"></el-table-column>
        <el-table-column prop="price" label="价格/元"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-info" @click="see(scope.row)" size="mini">详 情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import cookie from 'js-cookie'

  const axios = require('axios')
  export default {
    name: "Search",
    data() {
      return {
        content: '',
        tableData: null,
        dialogTableVisible: false
      }
    },
    computed: {
      showUser() {
        return cookie.get('loginName')
      }
    },
    methods: {
      exit() {
        this.$router.push("/login")
        this.$message('退出登录')
      },
      clearAllCookie() {
        var date = new Date();
        date.setTime(date.getTime() - 10000);
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        console.log("删除cookies:" + keys);
        if (keys) {
          for (var i = keys.length; i--;)
            document.cookie = keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
        }
        this.$router.push('/')
      },
      search() { // 搜索结果
        var content = this.$refs.content.value; // 获取 el-input输入的内容
        // console.log('要搜索的内容:' + content)
        const _this = this
        _this.dialogTableVisible = true
        axios.get('http://localhost:9000/cat/search/' + content).then(function (resp) {
          _this.tableData = resp.data  // 将搜索结果回显至dialog
        })
      },
      see(row) {  // 搜索结果  查看详情
        this.$router.push({
          path: '/details',
          query: {
            id: row.id
          }
        });
      }
    }
  }
</script>

<style>
  .searchInput {
    width: 200px;
    border: #ccc 1px solid;
    text-align: center;
    font-size: 18px;
  }

  .el-button {
    font-size: 10px;
  }

  .show {
    margin-left: 250px;
  }
</style>
